<template>
	<view class="page">
		<view class="uni-list user_padding">
			<view class="uni-list-cell">
				<view class="uni-media-list uni-list-cell-navigate" style="flex-direction: row;">
					<view class="uni-media-list-logo phto">
						<image :src="user.avatar" :lazy-load="true" @tap="showPhoto()" style="width: 125upx;height: 125upx;border-radius: 15upx;" />
					</view>
					<view class="uni-media-list-detail" style="height: aotu;">
						<view class="uni-media-list-text-top">{{user.nickname}}
							<image class="sex_type" :src="'../../static/theme/default/details/' + user.sex + '.png'" :lazy-load="true" />
						</view>
						<view class="uni-media-list-info">
							昵称: &nbsp;{{user.nickname}}
						</view>
						<view class="uni-media-list-info">
							账号: &nbsp;{{user.is_friend?user.username:'***'}}
						</view>
						<view class="uni-media-list-text-bottom uni-ellipsis"></view>
					</view>
				</view>
			</view>
		</view>

		<view class="uni-card">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="none">
					<view class="uni-list-cell-navigate">
						<view style="width:100%;">
							个性签名<view class="show_text">{{user.doodling}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="none" v-if="user.is_friend">
					<view class="uni-list-cell-navigate uni-navigate-right">
						<view style="width:100%" @tap="setRemark">
							备注和标签
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="none" v-if="is_apply">
					<view class="uni-list-cell-navigate">
						<view style="width:100%;">
							验证信息 <view class="show_text">{{user.apply_info}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="none" v-if="isFrom">
					<view class="uni-list-cell-navigate">
						<view style="width:100%">
							来 源 <view class="show_text">{{user.from}}</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="none" v-if="user.is_friend && user.show_friend.mobile">
					<view class="uni-list-cell-navigate">
						<navigator hover-class="none" url="/pages/details/more">
							<view style="width:100%">
								手机号码 <view class="show_text">{{user.show_friend.mobile}}</view>
							</view>
						</navigator>
					</view>
				</view>
			</view>
		</view>

		<view class="uni-card" @tap="goCircle">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="none">
					<view class="uni-list-cell-navigate uni-navigate-right friend_cricle">
						<view class="cricle_title">朋友圈</view>
						<view class="uni-media-list-logo cricle_img" v-for="(img,img_index) in user.show_friend.circle" :key="img_index">
							<image :src="img" style="border-radius: 8upx;" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="uni-card">
			<view class="uni-list">
				<view v-if="user.is_friend">
					<view class="uni-list-cell" hover-class="none" v-if="isFrom">
						<view class="uni-list-cell-navigate" @tap="goMsg()">
							<view class="tool">
								<view class="uni-media-list-logo">
									<image src="../../static/theme/default/details/msg.png"></image>
								</view>
								发消息
							</view>
						</view>
					</view>
					<view class="uni-list-cell" hover-class="none" v-if="0">
						<view class="uni-list-cell-navigate">
							<view class="tool">
								<view class="uni-media-list-logo">
									<image src="../../static/theme/default/details/conversation.png"></image>
								</view>
								音视频通话
							</view>
						</view>
					</view>
				</view>
				<view class="uni-list-cell" hover-class="none" v-else>
					<view class="uni-list-cell-navigate">
						<view class="tool" @tap="addFriend">
							添加到通讯录
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import websocket from '../../util/websocket';
	import _hook from '../../util/_hook';
	import _data from '../../util/_data';
	import friend from '../../util/api/friend.js';

	export default {
		components: {

		},
		data() {
			return {
				user_id: '',
				is_type: 0,
				is_apply: 0,
				from: '',
				chat_id:'',
				user: {
					show_friend: [],
					photo: 'default_man/90.jpg',
					sex: 0,
				},
			}
		},
		onShow() {
			_hook.routeSonHook();
		},
		computed: {
			isFrom() {
				return this.user.is_friend && this.user_id != _data.data('user_info').id;
			},
			isRemarks() {
				return this.user.is_friend && this.user.user_id != _data.data('user_info').id;
			},
		},
		methods: {
			showPhoto() {
				let photo = this.userPhoto.replace('70.jpg', '300.jpg');
				uni.previewImage({
					indicator: "none",
					current: photo,
					urls: [photo, ],
				});
			},
			goCircle() {
				uni.navigateTo({
					url: '../push/circle_details?user_id=' + this.user.user_id,
				});
			},
			setRemark() {
				uni.navigateTo({
					url: '/pages/friend/remarks?user_id=' + this.user.user_id,
				});
			},
			goMsg(chat_id) {
				if (this.user.user_id == _data.data('user_info').id) {
					uni.showToast({
						title: '不能给自己发消息',
						duration: 2000,
						icon: 'none',
					});
					return;
				}
				this.$httpSend({
					path: '/chat/chat/getChatId',
					data: {
						user_id: this.user.user_id
					},
					success(data) {
						uni.navigateTo({
							url: '../chat/message?chat_id=' + data.chat_id,
						});
					}
				});
			},
			addFriend() {
				let _this = this;
				if (_this.from == 'apply_list' || _this.user.apply_id) {
					friend.confirmApply({
						apply_id: _this.user.apply_id
					}).then(res => {
						uni.showToast({
							title: '已添加',
							duration: 2000
						});
						/** 更新申请列表数据 */
						let friend_apply_list = _data.localData('friend_apply_list');
						for (let i = 0, j = friend_apply_list.length; i < j; i++) {
							if (friend_apply_list[i].id == _this.user.apply_id) {
								friend_apply_list[i].text = '已添加';
								_data.localData('friend_apply_list', friend_apply_list);
								break;
							}
						}
						setTimeout(() => {
							uni.navigateBack();
						}, 2500);
					})
				} else {
					uni.navigateTo({
						url: ('../friend/apply?user_id=' + _this.user_id + '&is_type=' + _this.is_type),
					});
				}
			}
		},
		onLoad(option) {
			let _this = this;
			_this.user_id = option.user_id;
			if ('from' in option) {
				_this.from = option.from;
			}
			if ('is_type' in option) {
				_this.is_type = option.is_type;
			}
			if ('is_apply' in option) {
				_this.is_apply = option.is_apply;
			}
			friend.userInfo({
				user_id: _this.user_id,
				from: this.from
			}).then(res => {
				_this.user = res.data;
			});
		},
		onNavigationBarButtonTap(e) {
			if (this.user_id == _data.data('user_info').id) {
				/* uni.showToast({
					title: '不能操作自己',
					duration: 1500,
					icon:'none',
				}); */
				return;
			}
			if (!this.user.is_friend) {
				uni.showToast({
					title: '对方不是好友,没有更多操作了',
					duration: 1500,
					icon: 'none',
				});
				return;
			}
			uni.navigateTo({
				url: ('./more_detail?user_id=' + this.user_id),
			});
		},
	}
</script>

<style>
	.uni-media-list-detail {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-apply_info: space-between;
		align-items: flex-start;
		overflow: hidden;
	}

	.uni-media-list-info {
		font-size: 26upx;
		padding-top: 5upx;
		color: #8f8f94;
	}

	.uni-media-list-text-top {
		margin-top: 0;
		font-size: 38upx;
		font-weight: 600;
	}

	.uni-media-list-logo {
		width: 45upx;
		height: 45upx;
		margin-right: 10upx;
		display: inline-block;
		vertical-align: middle;
	}

	.phto {
		position: relative;
		z-index: 3;
		margin-left: 15upx;
		margin-right: 20upx;
		bottom: 0;
		width: 125upx;
		height: 125upx;

	}

	.user_padding {
		padding-bottom: 25px;
	}

	.uni-card {
		box-shadow: none;
	}

	.user_padding:before {
		background-color: white;
	}

	.tool {
		width: 100%;
		text-align: center;
	}

	.friend_cricle {
		padding-top: 20upx;
		padding-bottom: 20upx;
	}

	.cricle_title {
		display: inline-block;
		width: 120upx;
	}

	.cricle_img {
		width: 100upx;
		height: 100upx;
	}

	.sex_type {
		width: 35upx;
		height: 35upx;
		margin-right: 0upx;
		margin-left: 20upx;
	}

	.show_text {
		position: absolute;
		right: 60upx;
		color: #8f8f94;
		display: inline-block;
	}
</style>
